<template>
<div id="add_bank_second">
		<c-title :hide="false" text='填写银行卡信息'></c-title>
    <div class="bank-main">
      <div class="bank-second">
        <van-field 
          label="银行" 
          label-class="account-label" 
          placeholder="请选择所属银行" 
          name="id_card_no"
          readonly
          v-model="bank_name"
          @click="show2 = true" 
          >
          <template #right-icon>
            <span class="iconfont icon-icon_more11"></span>
          </template>
        </van-field>
        <van-field 
          label="卡类型" 
          label-class="account-label" 
          placeholder="请选择银行卡类型" 
          readonly
          v-model="bank_type"
          @click="show3 = true" 
          >
          <template #right-icon>
            <span class="iconfont icon-icon_more11"></span>
          </template>
        </van-field>
        <van-field 
            v-if="radio1 == 1"
            label="安全码" 
            label-class="account-label" 
            placeholder="卡背面末三位"
            v-model="cvv" 
            :rules="[{ required: true, message: '' }]"/>
        <van-field 
          v-if="radio1 == 1"
          label="有效期" 
          label-class="account-label" 
          placeholder="请选择有效期" 
          readonly
          v-model="expire_date"
          @click="openDate" 
          >
          <template #right-icon>
            <span class="iconfont icon-icon_more11"></span>
          </template>
        </van-field>
      </div>
      <div class="bank-binding" >
        <div class="bank-hint">提醒：后续只能绑定该持卡人的银行卡</div>
        <template v-if="bank.length <= 0">
          <van-field 
            label="姓名" 
            label-class="account-label" 
            placeholder="请输入姓名"
            v-model="payer_name" 
            />
          <van-field 
            label="证件类型" 
            label-class="account-label" 
            placeholder="请选择证件类型" 
            readonly
            v-model="id_type"
            @click="show4 = true"
            >
            <template #right-icon>
              <span class="iconfont icon-icon_more11"></span>
            </template>
          </van-field>
          <van-field 
              label="证件号" 
              label-class="account-label" 
              placeholder="请输入证件号"
              v-model="id_no" 
              />
        </template>
          <van-field 
            label="手机号" 
            label-class="account-label" 
            placeholder="请输入银行卡预留手机号"
            v-model="payer_phone" 
          />
        
          <template v-if="check_open">
            <van-field 
              label="绑定手机号" 
              label-class="account-label" 
              placeholder="请填写绑定的手机号" 
              readonly
              v-model="member_phone"
              >
              <template #right-icon v-if="!member_phone">
                <span class="iconfont icon-icon_more11"></span>
              </template>
            </van-field>
            <van-field 
              label="图形验证码" 
              label-class="account-label" 
              placeholder="请填写右侧图形验证码" 
              v-model="captcha"
              v-if="isOpenCaptcha == 1"
              >
              <template #right-icon>
                <img style="width: 7.5rem; height: 2.5rem; z-index: 999;" :src="imgCodeLink" @click="getCaptchaImg" v-if="imgCodeLink"/>
              </template>
            </van-field>
            <van-field 
              label="验证码" 
              label-class="account-label" 
              placeholder="请填写验证码" 
              v-model="v2_code"
              >
              <template #right-icon>
                <span class="getcodeClass" @click="VerificationCode" v-show="!count">获取验证码</span>
                <span class="getcodeClass" v-show="count">{{ count }}秒后重新获取</span>
              </template>
            </van-field>
          </template>
      </div>
      <div class="mb100"></div>
      <div class="bank-btn" :style="iPnoneBottomBol ? 'bottom: 34px;' : ''">
        <div class="flex-a-c">
          <van-checkbox v-model="checked" checked-color="var(--themeBaseColor)">同意<span class="agreement" @click="show5 = true">《用户协议》</span></van-checkbox>
        </div>
        <van-button type="primary" style="width:100%;border-radius: 30px;" color="var(--themeBaseColor)" @click="addBank" >确定</van-button>
      </div>
    </div>
    <banking-pop 
      :cardList="datas"  
      :bankShow.sync="show2"
      :imgPath="imgPath" 
      ref="lbankingPopup" 
      :bankIndex="bankIndex"
      @bankClick="bankClick">
    </banking-pop>
    <bank-type-pop 
      :cardList="card" 
      :cardShow.sync="show3"  
      :bankIndex="cardIndex"
      @cardClick="cardClick">
    </bank-type-pop>
    <papers-pop 
      :papersList="idType" 
      :cardShow.sync="show4"  
      ref="papersPopup"  
      :bankIndex="certIndex"
      @papersClick="papersClick">
    </papers-pop>
    <van-popup   :style="{ backgroundColor: 'transparent' }"  v-model="show5" @close="show5 = false">
      <div class="serviceBox">
        <div class="poset-img">
          <div class="title">
            用户协议
          </div>
          <div class="content">
            <div v-html="user_agrt"></div>
          </div>
        </div>
       
        <div class="posbox flex-j-c"  @click="show5 = false">
          <span class="iconfont icon-adsystem_icon_cancle"></span>
        </div>
      </div>
    </van-popup>
		<van-popup v-model="tapTimeOne" position="bottom" :style="{ width: '100vw' }">
			<van-datetime-picker
				v-model="date"
				type="year-month"
				title=""
				:formatter="formatter"
				ref="datetime"
				@confirm="shijian"
				@cancel="taptwo = false"
			/>
		</van-popup>
	</div>
</template>
<script>
import add_bank_second_controller from "./add_bank_second_controller";
export default add_bank_second_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.pcStyle #add_bank_second .bank-btn {
  position: fixed;
  width: 375px;
  left:50%;
  bottom: 0;
  transform: translate(-50%, 0%);
  margin: 0 auto;
}
.bank-second .van-cell__title {
  flex:1;
  text-align: left;
}
.mb100 {
  height: 120px;
  clear: both;
}
.serviceBox  ::v-deep .content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}
::v-deep .account-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: #00001C;
}
.bank-btn ::v-deep .van-checkbox  {
  padding:0 0 14px 0;
}
.bank-btn ::v-deep .agreement {
  color:var(--themeBaseColor);
}
#add_bank_second {
  height: 100vh;
  // background-color: #fff;
  .bank-main {
    margin:10px 12px 0 12px;
    .bank-second {
      border-radius: 8px;
      overflow: hidden;
    }
    .bank-binding {
      background: #FFFFFF;
      border-radius: 8px 8px 8px 8px;
      padding:10px 0px;
      margin:10px 0 0 0;
      .bank-hint {
        font-size: 12px;
        color: #6E6E79;
        padding:8px 10px;
        box-sizing: border-box;
        text-align: left;
        background: #F9F9F9;
        border-radius: 6px 6px 6px 6px;
        margin:0 12px;
      }
    }
    .getcodeClass {
      font-size: 14px;
      color: var(--themeBaseColor);
    }
    .bank-btn {
      background: #FFFFFF;
      box-shadow: 0px 0 5px 1px #F5F5F5;
      border-radius: 0px 0px 0px 0px;
      position: fixed;
      bottom:0;
      left:0;
      width: 100%;
      padding:10px 12px;
    }
  }
  .serviceBox {
    width: 18.4375rem;
    // height: 25.6875rem;
    margin-bottom: 6.25rem;
    position: relative;
    .poset-img {
      width: 18.4375rem;
      height: auto;
      // height: 25.6875rem;
      box-sizing: border-box;
      background-color: #fff;
      background: #FFFFFF;
      border-radius: 0.75rem 0.75rem 0.75rem 0.75rem; 
      padding:1.125rem 0.9375rem 1.125rem 0.9375rem;
      .title {
        font-weight: bold;
        font-size: 18px;
        color: #00001C;
        padding:0 0 20px 0;
      }
    }
    .posbox {
      position: absolute;
      bottom: -5rem;
      width: 100%;
      text-align: center;
      span {
        color: #D6D6DC;
        font-size: 3rem;
      }
    }
  }
}
</style>
